﻿@{
    ViewData["Title"] = "LuXian";
}


@section headpart{

}

@section bodypart{
    <div class="TopicLabel">历史推演-行进路线</div>
    <div class="Map">
    MAP
    </div>
    <div class="Charts">
        <div id="chart" style="height:400px; width:380px;">
        </div>
    </div>
}

@section scripts{
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('chart'));
    var option = {
        title: {
            text: '人数统计',
            //subtext: '动态变化'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {
            data: ['死亡人口-折线', '死亡人口-柱状']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: (function () {
                    var res = [];
                    var a = 25;
                    while (a >= 9)
                    {
                        var aa = "1937/12/" + a;
                        res.unshift(aa);
                        a -= 2;
                    }
                    return res;
                })()
            },
            {
                type: 'category',
                boundaryGap: true,
                data: (function () {
                    var res = [];
                    //var a = 25;
                    //while (a >= 9) {
                    //    var aa = "1937/12/" + a;
                    //    res.unshift(aa);
                    //    a -= 2;
                    //}
                    return res;
                })()
            }
        ],
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '人数/万人',
                max: 30,
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
            {
                type: 'value',
                scale: true,
                name: '人数/万人',
                max: 30,
                min: 0,
                boundaryGap: [0.2, 0.2]
            }
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: [12, 20, 15, 8, 7, 11, 13, 15, 30]
              
            },
            {
                name: '人数',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: "#2ec7c9"
                    }
                },

                data: [12, 20, 15, 8, 7, 11, 13, 15, 30]
            }
        ]
    };

    //app.count = 11;
    //setInterval(function () {
    //    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    //    var data0 = option.series[0].data;
    //    var data1 = option.series[1].data;
    //    data0.shift();
    //    data0.push(Math.round(Math.random() * 1000));
    //    data1.shift();
    //    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

    //    option.xAxis[0].data.shift();
    //    option.xAxis[0].data.push(axisData);
    //    option.xAxis[1].data.shift();
    //    option.xAxis[1].data.push(app.count++);

    //    myChart.setOption(option);
    //}, 2100);

    myChart.setOption(option);

</script>
}
